<template>
  <div class="chart-container hide-scroller-bar" ref="centerControlPark">
    <a-row :gutter="[16, 16]">
      <a-col :span="24" class="total-info">
        <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__pulse"
        >
          <ParkNumTotal />
        </transition>
      </a-col>
      <a-col :xs="24" :sm="18">
        <a-row :gutter="[16, 16]">
          <a-col :xs="24" :sm="8" class="col-box" :style="colStyle">
            <transition
              appear
              name="animate__animated animate__bounce"
              enter-active-class="animate__zoomIn"
            >
              <ParklingLotOccupancy />
            </transition>
          </a-col>
          <a-col :xs="24" :sm="8" class="col-box" :style="colStyle">
            <transition
              appear
              name="animate__animated animate__bounce"
              enter-active-class="animate__zoomIn"
            >
              <ChargingStationOccupancy />
            </transition>
          </a-col>
          <a-col :xs="24" :sm="8" class="col-box" :style="colStyle">
            <transition
              appear
              name="animate__animated animate__bounce"
              enter-active-class="animate__zoomIn"
            >
              <ParkingTimeRate />
            </transition>
          </a-col>
          <a-col :xs="24" :sm="8" class="col-box" :style="colStyle">
            <transition
              appear
              name="animate__animated animate__bounce"
              enter-active-class="animate__zoomIn"
            >
              <ParkingLotUseTrend />
            </transition>
          </a-col>
          <a-col :xs="24" :sm="8" class="col-box" :style="colStyle">
            <transition
              appear
              name="animate__animated animate__bounce"
              enter-active-class="animate__zoomIn"
            >
              <ChargingStationUseTrend />
            </transition>
          </a-col>
          <a-col :xs="24" :sm="8" class="col-box" :style="colStyle">
            <transition
              appear
              name="animate__animated animate__bounce"
              enter-active-class="animate__zoomIn"
            >
              <ParkTurnoverTrend />
            </transition>
          </a-col>
        </a-row>
      </a-col>

      <a-col
        :xs="24"
        :sm="6"
        :style="
          $store.getters.dataVMobile
            ? ''
            : { height: rowHeight * 2 + rowGap + 'px' }
        "
      >
        <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__zoomIn"
        >
          <CarPassRecord />
        </transition>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  watch,
} from "vue";
import store from "../../../../store/index";
import ParkNumTotal from "./ParkNumTotal.vue";
import ParklingLotOccupancy from "./ParklingLotOccupancy.vue";
import ChargingStationOccupancy from "./ChargingStationOccupancy.vue";
import ParkingTimeRate from "./ParkingTimeRate.vue";
import ParkingLotUseTrend from "./ParkingLotUseTrend.vue";
import ChargingStationUseTrend from "./ChargingStationUseTrend.vue";
import CarPassRecord from "./CarPassRecord.vue";
import ParkTurnoverTrend from "./ParkTurnoverTrend.vue";

export default defineComponent({
  name: "CenterControlPark",
  components: {
    ParkNumTotal,
    ParklingLotOccupancy,
    ChargingStationOccupancy,
    ParkingTimeRate,
    ParkingLotUseTrend,
    ChargingStationUseTrend,
    CarPassRecord,
    ParkTurnoverTrend,
  },
  setup() {
    const state = reactive({
      centerControlPark: null,
      pageHeight: 900,
      rowHeight: 300,
      rowNum: 2, // 均分的行数
      totalRowNum: 3,
      rowGap: 16,
    });

    const colStyle = computed(() => `height:${state.rowHeight}px`);

    watch(
      () => store.getters.resizeTrigger,
      () => {
        getPageHeight();
      }
    );

    const getPageHeight = () => {
      state.pageHeight = state.centerControlPark.offsetHeight;
      state.rowHeight = Math.floor(
        (state.pageHeight - state.pageHeight * 0.12) / state.rowNum -
          state.rowGap -
          6
      );
    };

    onMounted(() => {
      getPageHeight();
    });

    return {
      colStyle,
      ...toRefs(state),
    };
  },
});
</script>
<style lang="less" scoped>
@import "../../styles/common.less";
.chart-container {
  overflow: hidden auto;
  margin-top: 6px;
  .col-box {
    // height: 40%;
    min-height: 220px;
  }
  .total-info {
    height: 12%;
    min-height: 80px;
  }
}
</style>
